<template>
	<view>
		<!-- 头部 -->
		<!-- 未登录 -->
		<view v-if="!isObjNone(user)" class="header flex-row bg-white" @click="toLogin">
			<image class="head-img" src="/static/images/user/icon_head.png" mode=""></image>
			<view class="flex-between flex-1">
				<view class="name">点击登录/注册</view>
				<u-icon name="arrow-right" color="#ccc" size="10"></u-icon>
			</view>
		</view>
		<view v-else class="header flex-row bg-white" @click="jumpPage('/pages/user/userinfo')">
			<image class="head-img" :src="user.headimg" mode=""></image>
			<view class="flex-between flex-1">
				<view class="name">{{user.nickname}}</view>
				<u-icon name="arrow-right" color="#ccc" size="20"></u-icon>
			</view>
		</view>

    <view class="w-690 h-292 wdqb p-t-24">
      <view class="flex-between p-l-30 p-r-30">
        <view class="font-32 font-weight-600">我的钱包</view>
        <view style="color:#808080;" class="flex-center" @click="jump('/pages/user/wallet')">查看更多 <image class="w-24 h-24" src="@/static/images/ic_chakangengduo@2x.png"/></view>
      </view>
      <view class="flex-between m-t-68 p-l-50">
        <view>
          <view style="color:#808080;" class="font-24">钱包余额(元)</view>
          <view style="color:#FB2D19;" class="font-64 m-t-4">{{user.balance_money}}</view>
        </view>
        <view class="tx_btn" @click="jump('/pages/user/withdrawal')">提现</view>
      </view>
    </view>

		<view class="flex" v-for="(item, i) in list" :key="i" @click="click(item)">
			<image class="w-48 h-48 m-l-30 m-r-20" :src="item.icon" />
			<view class="flex-between flex-1 p-r-26 h-120 border-bottom-f0">
				<text class="name font-32 color-d">{{ item.title }}</text>
				<u-icon name="arrow-right" color="#ccc" size="10"></u-icon>
			</view>
		</view>

    <view class="flex-center m-t-30">
<!--    合同未签署: #FB2D19   合同签署中: #FC7916   合同已签署: #09CDD5-->
      <view class="ht_wqs flex-between p-l-30 p-r-30" :style="{
        background: '#FC7916'
      }">
        <view class="flex-center">
          <image class="w-48 h-48" src="@/static/ic_hetongqianshu@2x.png"/>
          <view class="font-32 font-weight-500 color-c m-l-20">合同未签署</view>
        </view>
        <view class="ht_btn flex-center" :style="{
          color:'#FC7916'
        }">立即签署</view>
      </view>
    </view>

		<view class="footer" v-if="isObjNone(user)">
			<view class="footer-primary-btn" @tap="show = true">退出登录</view>
		</view>

		<u-modal :showCancelButton="true" :show="show" title="退出登录" content='确认退出登录吗'
			@confirm="$store.commit('CLEAR_USER'),show = false" @cancel="show = false"></u-modal>

		<Service ref="service" />
	</view>
</template>

<script>
	import Service from '@/components/user/Service'
	export default {
		name: "my",
		components: {
			Service
		},
		data() {
			return {
				show: false,
				list: [
          // {
					// 	title: '我的钱包',
					// 	icon: require("@/static/images/user/icon_my_kefu@2x.png"),
					// 	link: '/pages/user/wallet',
					// 	func: null
					// },
          {
						title: '银行卡管理',
						icon: require("@/static/images/user/icon_my_yhk.png"),
						link: '/views/user/bankCard/index',
						func: null
					},
					// {
					// 	title: '在线报价',
					// 	icon: require("@/static/images/user/icon_my_kefu@2x.png"),
					// 	link: '/pages/user/calculator',
					// 	func: null
					// },
					// {
					// 	title: '操作指南',
					// 	icon: require("@/static/images/user/icon_my_zhuanpan@2x.png"),
					// 	link: '/pages/user/course',
					// 	func: null
					// },
          {
						title: '资质上传',
						icon: require("@/static/images/user/icon_my_zhuanpan@2x.png"),
						link: '/views/user/qualification/index',
						func: null
					},
					{
						title: '联系客服',
						icon: require("@/static/images/user/icon_my_kefu@2x(1).png"),
						link: '',
						func: this.openService,
						space: true,
					}
					// ,
					// {
					// 	title: '京瑞康养',
					// 	icon: require("@/static/images/user/icon_my_zhuanpan@2x.png"),
					// 	link: '/pages/file/file',
					// 	func: null
					// }
				],
			}
		},
		onShow() {
			this.$store.dispatch('getUserInfo')
			this.messageCenter();
		},
		methods: {
			click(item) {
				if (!this.isObjNone(this.user)) {
					this.toLogin()
					return;
				}
				if (item.func !== null) {
					item.func();
				} else if (item.link !== '') {
					this.jumpPage(item.link);
				}
			},
			openService() {
				this.$refs.service.open();
			},
			jumpPage(url) {
				uni.$u.route(url)
			},
			async messageCenter() {
				const msgCenter = await this.$api.common.system('messageCenter')
				try {
					if (msgCenter.code === 200 && (msgCenter.data.last_order_msg.unread_num || msgCenter.data.last_system_msg.unread_num)) {
						uni.showTabBarRedDot({
							index:1
						})
					}
				}
				catch(err) {}
			},
		},
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.header {
		padding: 34rpx 24rpx 22rpx 30rpx;
		margin-bottom: 28rpx;

		.head-img {
			width: 184rpx;
			height: 184rpx;
			margin-right: 20rpx;
			border-radius: 50%;
		}

		.name {
			width: 380rpx;
			font-size: 36rpx;
			font-weight: 500;
			line-height: 50rpx;
			color: rgba(0, 0, 0, 0.87);
		}
	}

	.footer {
		// padding: 144rpx 24rpx 0;

		.footer-primary-btn {
			width: 690rpx;
			height: 88rpx;
			background-color: $b;
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 49rpx;
			margin: 144rpx auto 0;
		}
	}

  .wdqb{
    margin-left: 30rpx;
    background: url("@/static/images/bg_qianbao@2x.png") 0 0/ 100% 100% no-repeat;
    box-sizing: border-box;
  }

  .tx_btn{
    width: 160rpx;
    height: 72rpx;
    background: linear-gradient( 117deg, #FE515F 0%, #FB2D19 20%, #FB2D19 59%, #FC7916 100%);
    border-radius: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 32rpx;
    margin-right: 30rpx;
  }

  .ht_wqs{
    width: 690rpx;
    height: 120rpx;
    background: #FB2D19;
    border-radius: 28rpx;
    box-sizing: border-box;
  }

  .ht_btn{
    width: 160rpx;
    height: 72rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    font-size: 28rpx;
    color: #FB2D19;
  }
</style>
